<template>
  <div class="echarts-wraper">
    <div ref="echarts" style="height: 100%; width: 100%" class="echarts"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  setup() {
    const { proxy } = getCurrentInstance()
    const drawChart = (value) => {
      const myChart = echarts.init(proxy.$refs.echarts)
      const option = {
        legend: {
          show: true,
          bottom: -5,
          left: 'center'
        },
        grid: {
          left: 30,
          right: 30,
          top: 30,
          bottom: 10,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          formatter: function (params) {
            return params[0].name + '</br>' + params[0].marker + '  ' + params[0].data
          }
        },
        xAxis: {
          type: 'category',
          minInterval: 1,
          axisTick: { show: false },
          axisLine: {
            show: true
          },
          data: value.xData
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
          nameTextStyle: { color: '#707070', fontSize: 14 },
          splitLine: { show: false },
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: {
          type: 'bar',
          data: value.yData
        }
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
    return { drawChart }
  }
}
</script>
